{{extend '../layout/main.html'}}

{{block name="main"}}
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>添加用户</h5>
        </div>
        <div class="ibox-content">
          <form class="form-horizontal m-t" method="POST" action="/admin/users/add" id="adduser">
            <div class="form-group">
              <label class="col-sm-3 control-label">账号：</label>
              <div class="col-sm-8">
                <input name="username" value="{{username}}" class="form-control" type="text">
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 输入您的账号,长度不能少于2位</span>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">密码：</label>
              <div class="col-sm-8">
                <input name="password" id="password" class="form-control" type="text" aria-required="true"
                  aria-invalid="false" class="valid">
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>密码不有过于简单</span>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">确认密码：</label>
              <div class="col-sm-8">
                <input name="confirm_password" class="form-control" type="text" aria-required="true"
                  aria-invalid="false" class="valid">
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>密码不有过于简单</span>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">年龄：</label>
              <div class="col-sm-8">
                <input name="age" value="10" class="form-control" type="number" aria-required="true" aria-invalid="true"
                  class="error">
              </div>
            </div>
            <div class="form-group draggable">
              <label class="col-sm-3 control-label">性别：</label>
              <div class="col-sm-9">
                <div class="radio i-checks">
                  <label>
                    <input type="radio" value="男神" name="sex" {{if sex=='男神' }} checked {{/if}}> <i></i> 男神</label>
                </div>
                <div class="radio i-checks">
                  <label>
                    <input type="radio" {{if sex=='女神' }} checked {{/if}} value="女神" name="sex"> <i></i>女神</label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-sm-8 col-sm-offset-3">
                <button class="btn btn-primary" type="submit">添加用户</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{{/block}}

{{block name='js'}}
<script src="/admin/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/admin/js/plugins/validate/messages_zh.min.js"></script>
<script src="/admin/js/plugins/iCheck/icheck.min.js"></script>
<script>
  $(document).ready(function () {
    $('.i-checks').iCheck({
      checkboxClass: 'icheckbox_square-green',
      radioClass: 'iradio_square-green',
    });
  });

  // 前端表单验证
  $("#adduser").validate({
    // 规则
    rules: {
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true
      },
      confirm_password: {
        equalTo: '#password'
      }
    },
    messages: {
      username: {
        required: '账号不能为空',
        minlength: '长度不能少于2位'
      },
      password: {
        required: '密码不能为空'
      }
    },
    // 让回车失效
    onkeyup: false,
    // 验证成功后，进行的回调事件
    submitHandler: function (form) {
      form.submit();   //提交表单
    }
  })



</script>
{{/block}}